<template>
  <view class="task">
    <nav-bar title="任务中心"></nav-bar>
    <image class="task-banner" src="/static/task-banner.png" mode="widthFix" />
    <view class="task-list">
      <van-cell v-for="task in taskList" :title="task.title" :value="task.count" @click="goLink(task)" is-link />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { apiTaskTodo } from '@/api/common';
import {
    onShow
} from '@dcloudio/uni-app';

let taskList = ref([
  {
    title: '隐患处理',
    count: 0,
    icon: 'passed',
    url: '/pages/hiddenTroble/index'
  },
  {
    title: '预警处理',
    count: 0,
    icon: 'records-o',
    url: '/pages/warningHandle/index'
  },
  {
    title: '预警督办',
    count: 0,
    icon: 'todo-list-o',
    url: '/pages/warningTodo/index'
  },
  {
    title: '日常维修',
    count: 0,
    icon: 'setting-o',
    url: '/pages/dailyFix/index?type=1'
  },
  {
    title: '日常养护',
    count: 0,
    icon: 'notes-o',
    url: '/pages/dailyFix/index?type=2'
  },
  {
    title: '巡查任务',
    count: 0,
    icon: 'flag-o',
    url: '/pages/patrolInspect/regular-list'
  },
  {
    title: '巡查巡检',
    count: 0,
    icon: 'orders-o',
    url: '/pages/patrolInspect/daily-list'
  },
  {
    title: '放水调度',
    count: 0,
    icon: 'orders-o',
    url: '/pages/waterproofScheduling/index'
  }
]);

const goLink = (task) => {
  uni.navigateTo({ url: task.url })
};
const getTaskTodo = () => {
  //0-隐患处理 1-预警处理 2-预警督办 3-日常维修 4-日常养护 5-巡查任务 6-巡查巡检 7-放水调度
  apiTaskTodo().then(res => {
    res.map(task => {
      const index = Number(task.bizType);
      taskList.value[index].count = task.count || 0;
    })
  })
};
onShow(() => {
  getTaskTodo();
})
</script>

<style lang="scss" scoped>
.task {
  &-banner {
    width: 100%;
    vertical-align: top;
  }
  &-list {
    margin-top: 30rpx;
  }
  &-item {
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #1989fa , #87befc);
    color: $white;
  }
  &-title {
    flex: 1;
  }
}
</style>